<template>
	<div>
		<van-nav-bar
			:title="title" 
			:fixed="true" 
			left-arrow 
			@click-left="onClickLeft" 
		/>
		
		<div class="ziliao">
			<van-cell title="头像" is-link @click="tou"/>
			<van-popup
				v-model="show"
				position="bottom"
				:style="{ height: '24%' }"
			>
				<van-cell value="相机" center/>
				<van-cell value="从相册选择" center/>
				<van-cell value="保存" center/>
			</van-popup>
			
			<van-cell title="昵称" is-link value="五色糖8296" @click="name" />
			<van-dialog
			  v-model="show2"
			  title="修改昵称"
			  show-cancel-button
			  confirmButtonColor="#d46170"
			  cancelButtonColor="#d46170"
			>
				<van-field v-model="value" placeholder="请输入昵称" />
			</van-dialog>
			
			<van-cell title="填写邀请码" is-link value="填写" @click="yao" />
			<van-dialog
			  v-model="show3"
			  title="填写邀请码"
			  show-cancel-button
			  confirmButtonColor="#d46170"
			  cancelButtonColor="#d46170"
			>
				<van-field v-model="value" placeholder="" />
			</van-dialog>
			
			<van-cell title="性别" is-link @click="sex" value="女" />
			<van-popup
				v-model="show4"
				:style="{ height:'10%',width:'200px'}"
			>
				<van-radio-group v-model="radio" checked-color="#d4616e">
				  <van-radio name="1">女</van-radio>
				  <van-radio name="2">男</van-radio>
				</van-radio-group>
			</van-popup>
			
			<van-cell title="生日"  is-link to="information" />
			<van-cell title="常驻地址" is-link to="information" />
			<van-cell title="个性签名" is-link to="information" />
			<van-cell title="实名认证" is-link to="information" />
		</div>
	</div>
</template>

<script>
	export default{
		name:"Information",
		data(){
			return {
				title: "个人资料",
				show:false,
				show2: false,
				show3: false,
				show4: false,
				value:'',
				radio:1,
				xianshi:''
			}
		},
		// computed:{
		// 	if(radio==1){
		// 		return this.xianshi="女"
		// 	}else{
		// 		return this.xianshi="男"
		// 	}
		// },
		methods:{
			onClickLeft(){
				this.$router.go(-1)
			},
			tou(){
				this.show = true
			},
			name(){
				this.show2 = true
			},
			yao(){
				this.show3 = true
			},
			sex(){
				this.show4 = true
			}
		}
	}
</script>

<style scoped="">
	.van-nav-bar__title {
	  color: #fff;
	  font-size: 14px;
	}
	
	.van-nav-bar {
	  height: 46px;
	  background: #d46170;
	}
	
	.van-icon,
	.van-icon::before {
	  color: #FFF;
	  font-size: 12px;
	}
	.ziliao{
		margin-top: 46px;
	}
	.ziliao .van-icon::before{
		color: #000;
	}
	.van-cell{
		font-size: 13px;
	}
	.van-cell__value--alone{text-align: center;}
	.van-radio{
		margin: 5px;
	}
</style>
